<template>
	<view class="tab-bar">
		<view v-for="(item, index) in list" :key="index" 
		 class="tab-bar-item" :class="{'active': selected === index}"
		 @click="onChange(item, index)">
			<image class="tab-img" :src="selected === index ? iconImgs[index].selectedIconPath : iconImgs[index].iconPath" mode="widthFix"/>
			<!-- <view class="tab-icon iconfont" :class="icons[index]"></view> -->
			<view class="tab-text">{{item.text}}</view>
		</view>
	</view>
	
</template>

<script>
export default {
	props: {
		selected: {
			default () {
				return 0
			}
		},
	},
	data () {
		return {
			iconImgs: [
				{
					selectedIconPath: require('@/static/image/tabBar/chats_selected.png'),
					iconPath: require('@/static/image/tabBar/chats.png')
				},
				{
					selectedIconPath: require('@/static/image/tabBar/contacts_selected.png'),
					iconPath: require('@/static/image/tabBar/contacts.png')
				},{
					selectedIconPath: require('@/static/image/tabBar/discover_selected.png'),
					iconPath: require('@/static/image/tabBar/discover.png')
				},{
					selectedIconPath: require('@/static/image/tabBar/me_selected.png'),
					iconPath: require('@/static/image/tabBar/me.png')
				}
			],
			icons: ['icon-112', 'icon-23', 'icon-faxian', 'icon-126'],
			list:[
				{
					id: 1,
					text: 'Chats',
					url: '/pages/chat/Chat'
				},
				{
					id: 2,
					text: 'Contacts',
					url: '/pages/friends/Friends'
				},
				{
					id: 3,
					text: 'Discover',
					url: '/pages/discover/Discover'
				},
				{
					id: 4,
					text: 'Me',
					url: '/pages/user/User'
				}
			]
		}
	},
	computed: {
	},
	methods: {
		onChange (item, index) {
			if (index === this.selected) return
			uni.switchTab({
			  url: item.url
			});
		}
	},
	mounted() {
	}
}
</script>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		min-height: 98rpx;
		background: $uni-bg-color;
		display: flex;
		justify-content: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9999;
		box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.15);
	}
	.tab-bar-item {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
		color: $ol-color-gray2;
		&.active {
			color: $ol-color-subsidiary;
		}
	}
	
	.tab-img {
		width: 44upx;
		height: 44upx;
	}
	.tab-icon {
		font-size: 50upx;
	}
	
	.tab-text {
		font-size: 20rpx;
	}
	
</style>
